
@import "./theme.scss";
@import "./mixin.scss";
.home{
    width: 100%;
    height: 100%;
    background-image: url("/image/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    .home-main{
        width: 55%;
        h1{
            text-align: center;
            font-size: 40px;
            color: #fff;
            font-weight: 600;
            line-height: 60px;
        }
        .url-input{
            display: flex;
        }
    }
    .cover{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #353535, $alpha: 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        .loading-card{
            width: 550px;
            height: 400px;
            overflow: hidden;
            border-radius: 20px;
            padding: 20px;
        }
        .loader{
            height:100%;
            position:relative;
            margin:auto;
            width:400px;
            &_overlay{
              width:150px;
              height:150px;
              background:transparent;
              box-shadow:0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
              border-radius:100%;
              z-index:-1;
              @include center;
            }
            &_cogs{
                z-index:-2;
                width: 100px;
                height:100px;
                top: -120px !important;
                @include center;
                &__top{
                    position:relative;
                    width:100px;
                    height:100px;
                    transform-origin: 50px 50px;
                    animation:rotate 5s infinite linear;
                    @for $i from 1 through 3{
                    div:nth-of-type(#{$i}){
                        transform:rotate($i * 30deg)
                    }
                    }
                    div.top_part{
                        width:100px;
                        border-radius:10px;
                        position:absolute;
                        height:100px;
                        background:$pink;
                    }
                    div.top_hole{
                        width:50px;
                        height:50px;
                        @include hole;
                        @include center;
                    }
                }
                &__left{
                    position: relative;
                    width: 80px;
                    transform: rotate(16deg);
                    top: 28px;
                    transform-origin: 40px 40px;
                    animation:rotate_left 5s .1s infinite reverse linear;
                    left: -24px;
                    height: 80px;
                    @for $i from 1 through 3{
                    div:nth-of-type(#{$i}){
                        transform:rotate($i * 30deg)
                    }
                    }
                    div.left_part{
                        width:80px;
                        border-radius:6px;
                        position:absolute;
                        height:80px;
                        background:$blue;
                    }
                    div.left_hole{
                        width:40px;
                        height:40px;
                        @include hole;
                        @include center;
                    }
                }
                &__bottom{
                    position: relative;
                    width: 60px;
                    top: -65px;
                    transform-origin: 30px 30px;
                    animation:rotate_left 5.1s .4s infinite linear;
                    transform: rotate(4deg);
                    left: 79px;
                    height: 60px;
                    @for $i from 1 through 3{
                    div:nth-of-type(#{$i}){
                        transform:rotate($i * 30deg)
                    }
                    }
                    div.bottom_part{
                        width:60px;
                        border-radius:5px;
                        position:absolute;
                        height:60px;
                        background:$yellow;
                    }
                    div.bottom_hole{
                        width:30px;
                        height:30px;
                        @include hole;
                        @include center;
                    }
                }
            }
            .load-text{
                text-align: center;
                width: 100%;
                position: absolute;
                bottom: 20px;
                font-size: 15px;
                color: #888888;
            }
        }
    }
}

/* Animations */

@keyframes rotate{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

@keyframes rotate_left{
    from{transform:rotate(16deg)}
    to{transform:rotate(376deg)}
}

@keyframes rotate_right{
    from{transform:rotate(4deg)}
    to{transform:rotate(364deg)}
}